.ui-item  {
    padding-left: px2rem(26px);
}
.perform-search-page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    .history {
        position: absolute;
        z-index: 1;
        top: px2rem(126px);
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #fff;

        .history-label {
            color: #999;
            font-size: px2rem(30px);
            height: px2rem(30px);
            line-height: px2rem(30px);
            padding: px2rem(26px) px2rem(48px) px2rem(50px);
            bperform-bottom: px2rem(1px) solid #ECECEC;

            span {

                height: px2rem(30px);
                line-height: px2rem(30px);
            }
            span.clear {
                color: #CCCCCC;
                font-size: px2rem(24px);
                cursor: pointer;
            }
        }
        .no-history {
            padding: px2rem(50px);
            text-align: center;
            font-size: px2rem(36px);
            color: #999;
        }
        ul.history-list {
            font-size: 0;
            padding: px2rem(20px);

            li {
                display: inline-block;
                vertical-align: middle;
                padding: px2rem(20px);
                margin: px2rem(19px) px2rem(6px);
                background-color: #F9F9F9;
                font-size: px2rem(30px);
                color: #666;
            }
        }
    }
    .list-container {
        position: relative;
        flex: 1;

        .list-items {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

                
            .list-item {
                font-size: px2rem(30px);

                .perform-info {
                    height: px2rem(320px);
                    margin: px2rem(20px) px2rem(13px);
                    bperform-radius: px2rem(20px);
                    background: url('images/perform/perform_red.png') no-repeat no-repeat center center;
                    background-size: 100% 100%;
                    color: #fff;

                    .perform-title {
                        position: relative;
                        padding: px2rem(35px) 0 px2rem(70px);

                        .title {
                            margin: 0 px2rem(210px) 0 px2rem(90px);
                            font-size: px2rem(36px);
                            color: #fff;
                            font-weight: bold;
                            height: px2rem(72px);
                            line-height: px2rem(36px);
                            overflow: hidden;
                            white-space: pre-wrap;
                        }
                        .short {
                            position: absolute;
                            top: px2rem(35px);
                            left: px2rem(35px);
                            bperform-radius: px2rem(7px);
                            width: px2rem(44px);
                            height: px2rem(44px);
                            line-height: px2rem(44px);
                            text-align: center;
                            font-size: px2rem(30px);
                            font-weight: bold;
                            color: #FF2A54;
                            background: #fff;
                        }
                        .status {
                            position: absolute;
                            top: px2rem(35px);
                            right: px2rem(30px);
                            font-size: px2rem(48px);
                            color: #FFFFFF;
                            font-weight: Medium;
                        }
                    }
                    .time,
                    .venue {
                        font-size: px2rem(30px);
                        height: px2rem(40px);
                        line-height: px2rem(40px);
                        padding-left: px2rem(35px);
                        margin-bottom: px2rem(20px);
                        color: #FFFFFF;
                    }
                    .time:before,
                    .venue:before {
                        content: ' ';
                        display: inline-block;
                        vertical-align: text-top;
                        width: px2rem(40px);
                        height: px2rem(40px);
                        line-height: px2rem(40px);
                        margin-right: px2rem(16px);
                    }
                    .time:before {
                        background: url('images/perform/time.png') no-repeat no-repeat center center;
                        background-size: 100% 100%;
                    }
                    .venue:before {
                        background: url('images/perform/venue.png') no-repeat no-repeat center center;
                        background-size: 100% 100%;
                    }
                }
                &.list-item-green .perform-info {
                    background: url('images/perform/perform_green.png') no-repeat no-repeat center center;
                    background-size: 100% 100%;

                    .perform-title .short {
                        color: #0F9CFF;
                    }
                }
                &.list-item-blue .perform-info {
                    background: url('images/perform/perform_blue.png') no-repeat no-repeat center center;
                    background-size: 100% 100%;

                    .perform-title .short {
                        color: #18314F;
                    }
                }
            }
        }
    }
}